<template>
  <div id="role_app">
      <div class="control">
          <el-button type="primary" plain round @click="isShow.flag=true">新增</el-button>
      </div>    
      <el-table
      :data="roleList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="角色状态">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template v-slot="$props">
            <el-button type="warning" size="mini" plain round @click="edit_role($props.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain round @click="del_role($props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Dialog :isShow="isShow" @reload="reload" ref="dialog_ref"/>
  </div>
</template>

<script>
import Dialog from "../components/AddRole.vue"
import { mapActions, mapState } from 'vuex'
export default {
    data(){
        return {
            isShow: {flag:false}
        }
    },
    components: {
        Dialog
    },
    computed:{
        ...mapState('role_model',['roleList'])
    },
    methods:{
        del_role(id){
          this.$axios.post("/roledelete",{id}).then(
            res=>{
              if(res.code === 200){
                this.$message({
                  type: "success",
                  message: "删除成功"
                })
                this.reload()
              }
            }
          )
        },
        edit_role(obj){
            //打开模态框
            this.isShow.flag = true
            //传递数据
            this.$refs.dialog_ref.setData(obj)
        },
        reload(){
            this.roleListActions()
        },
        ...mapActions('role_model',['roleListActions'])
    },
    created(){
        this.roleListActions()
    }
}
</script>

<style>
</style>